<template>
    <div>
        <h2>历史订单</h2>
        <el-card v-for="(order, index) in orders" :key="index" class="video-card">
            <div slot="header" class="video-header">
                <img :src="order.shop.shopImg" class="video-cover" alt="Video Cover" />
                <div class="video-info">
                    <h3>{{ order.shop.shopName }}</h3>
                    <p>总价：{{ order.total }}</p>
                </div>
                <P v-if="order.status===1" style="margin-left: 500px">已支付</P>
                <P v-if="order.status===0" style="margin-left: 500px">未支付</P>
                <P v-if="order.status===2" style="margin-left: 500px">已确认</P>
                <P v-if="order.status===3" style="margin-left: 500px">已退款</P>
                <el-button type="primary" @click="view(order.orderId)" style="margin-left: 100px">查看详情</el-button>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import {onBeforeMount, onMounted, ref} from "vue";
import {findHistoryOrder} from "@/api/customer";
import {getByShopId} from "@/api/shop";
import router from "@/router";
const orders=ref([{
    shop:{
        shopImg:"",
        shopName:""
    }
}])

onBeforeMount(async () => {
    let result = await findHistoryOrder();
    for (let i = 0; i < result.data.length; i++) {
        let order = result.data[i];
        let result2 = await getByShopId(order.shopId);
        order.shop = result2.data;
        orders.value[i]=order;
    }
});
function view(orderId){
    router.push({path:'/orderDetail',query:{orderId:orderId}})
}
</script>

<style scoped>


.video-card {
    margin-bottom: 20px;
}

.video-header {
    display: flex;
    align-items: center;
}

.video-cover {
    width: 100px;
    height: 80px;
    margin-right: 20px;
}

.video-info {
    flex: 1;
}

</style>